<template>
	<div class="areaCode_com">
		<van-action-sheet v-model="hasShow">
			<div class="content">
				<van-icon name="close" class="close" @click="$emit('input', false)" />
				<div class="list_box">
					<el-input v-model="inputKey" @input="search" :placeholder="$t('search')" class="input">
						<i slot="prefix" class="el-input__icon el-icon-search"></i>
					</el-input>
					<div class="item_box" v-for="(item,index) in AreaCodeArr" :key="index" @click="handleItem(item)">
						<p>
							{{item.name}}
						</p>
						<span>
							{{item.dialCode}}
						</span>
					</div>
					<div class="no_data" v-if="AreaCodeArr && AreaCodeArr.length <= 0">{{$t('noData')}}</div>
				</div>
			</div>
		</van-action-sheet>
	</div>
</template>

<script>
	import AreaCode from '@/utils/countryData.json'
	export default {
		props: {
			value: {
				type: Boolean,
				default: false,
			},
		},
		components: {},
		data() {
			return {
				AreaCodeArr: AreaCode.sort((a, b) => a.dialCode - b.dialCode),
				inputKey: '',
			}
		},
		computed: {
			hasShow: {
				get() {
					return this.value
				},
				set(val) {
					this.$emit('input', val)
				}
			},
			AreaCodeJson() {
				return AreaCode
			}
		},
		watch: {},
		mounted() {},
		methods: {
			search(val) {
				if (val) {
					let filter = this.AreaCodeJson.filter(i => String(i.dialCode).search(val) != -1 || i.name.search(val) != -1)
					this.AreaCodeArr = filter.sort((a, b) => a.dialCode - b.dialCode);
				} else {
					this.AreaCodeArr = this.AreaCodeJson.sort((a, b) => a.dialCode - b.dialCode)
				}
			},
			handleItem(item) {
				this.$emit('change', item.dialCode, item)
				this.$emit('input', false)
			}
		}
	}
</script>
<style lang="less" scoped>
	.areaCode_com {
		::v-deep .van-popup {
			background-color: transparent;
		}

		.content {
			position: relative;
			color: #fff;
			padding-top: 35px;

			.close {
				position: absolute;
				right: 15px;
				top: 0;
				font-size: 24px;
				color: #fff;
			}

			.list_box {
				background-color: #1A1A1A;
				border-radius: 20px 20px 0 0;
				padding: 35px 15px 5px;
				max-height: 60vh;
				overflow-y: auto;

				.input {
					margin-bottom: 40px;

					::v-deep .el-input__inner {
						height: 36px;
						line-height: 36px;
						background-color: #3D3D3D;
						border-radius: 18px;
						border: 0;
						color: #fff;

						&::placeholder {
							color: #fff;
						}
					}

					::v-deep .el-input__icon {
						line-height: 36px;
						color: #fff;
					}
				}

				.item_box {
					display: flex;
					align-items: center;
					justify-content: space-between;
					line-height: 35px;

					p {
						flex: 1;
						overflow: hidden;
						text-overflow: ellipsis;
						white-space: nowrap;
						text-align: left;
					}

					span {
						color: #999;
						flex-shrink: 0;
						margin-left: 10px;
					}
				}

				.no_data {
					font-size: 14px;
					text-align: center;
					color: #fff;
					padding: 10px;
				}
			}
		}
	}
</style>